<!-- 我的兑换 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="我的兑换" :borderBottom="false"></u-navbar>
		<view class="tabbar flex_bet">
			<view class="item" v-for="(item,index) in tabs" :key="index" @click="chooseTab(index)">
				<view :class="index==cur?'cur':''">{{item}}</view>
				<view class="line" v-show="index==cur"></view>
			</view>
		</view>
		<block v-for="(item,index) in list" :key="index">
			<view class="goods">
				<view class="flex_bet_align">
					<view class="shopName">平台积分商城</view>
					<view class="status" v-if="item.status==1">待支付</view>
					<view class="status" v-if="item.status==2">待兑换</view>
					<view class="status" v-if="item.status==3">待发货</view>
					<view class="status" v-if="item.status==4">待收货</view>
					<view class="status" v-if="item.status==5">已完成</view>
					<view class="status" v-if="item.status==6">取消订单</view>
					<view class="status" v-if="item.status==7">拒绝收货</view>
				</view>
				<view class="flex_align" @click="goDetail(item.id)">
					<image class="goodsImg" :src="item.image"></image>
					<view>
						<view class="goodsName">{{item.title}}</view>
						<view class="price">{{item.spec_integral?item.spec_integral:item.integral}}积分</view>
						<view class="sku">{{item.spec_name?item.spec_name:""}}</view>
					</view>
				</view>
				<view class="bot">
					<view class="msg"><text>数量：{{item.number}} </text>消费积分：{{item.consume_integral}}积分</view>
					<view class="flex_align" style="flex-direction: row-reverse;">
						<view class="btnFill" v-if="item.status==3" @click="operate(item.id)">提醒发货</view>
						<view class="btnFill" v-if="false">立即兑换</view>
						<view class="btnFill" v-if="item.status==4" @click="delivery(item.id)">确认收货</view>
						<!-- <view class="btnFill" v-if="item.status==5">再次兑换</view> -->
						<view class="btn" v-if="item.status==5" @click="deletes(item.id)">删除订单</view>
						<view class="btn" v-if="item.status==4" @click="logistics(item.id)">查看物流</view>
					</view>
				</view>
			</view>
			<view class="block"></view>
		</block>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wdingdan.png" mode="widthFix"></image>
			<view class="text">暂无订单</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator, shak;
	export default {
		data() {
			return {
				tabs: ['全部', '待发货', '待收货', '已完成'],
				cur: 0,
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
			}
		},
		onLoad(options) {
			_this = this;
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			//内层刷新这层
			isonshow() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			chooseTab(e) {
				_this.cur = e
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			getdata: function(firstLoad = false) {
				$paginator.getData('integrallist', {
					ord_screen_type: _this.cur
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			operate(id) {
				_this.click_shake(() => {
					_this.$api.get("remind", {
						order_id: id,
					}).then(data => {
						uni.showToast({
							title: "操作成功"
						})
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/personal/exchangeDetail?id=" + id
				})
			},

			delivery(id) {
				uni.showModal({
					content: '确认收到商品？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.post("integralordsave", {
								detail_id: id,
								status: 5
							}).then(data => {
								uni.showToast({
									title: "操作成功"
								})
								$paginator = new _this.$paginator(_this.$api)
								_this.getdata(true)
							});
						}
					}
				});
			},
			deletes(id) {
				uni.showModal({
					content: '确认删除订单？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delintegralorder", {
								detail_id: id,
							}).then(data => {
								uni.showToast({
									title: "操作成功"
								})
								$paginator = new _this.$paginator(_this.$api)
								_this.getdata(true)
							});
						}
					}
				});
			},
			// 查看物流
			logistics(id) {
				uni.navigateTo({
					url: "/personal/exchangeLogistics?id=" + id
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
	}

	.block {
		height: 20rpx;
		background-color: #F8F8F8;
	}

	.tabbar {
		padding: 39rpx 30rpx 34rpx 34rpx;
		background-color: #F8F8F8;

		.item {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;

			.cur {
				color: #38BE8C;
			}

			.line {
				width: 52rpx;
				height: 4rpx;
				margin: 0 auto;
				background: linear-gradient(90deg, #38be8c 8%, rgba(56, 190, 140, 0.00));
				border-radius: 2rpx;
			}
		}
	}

	.goods {
		padding: 24rpx 30rpx 40rpx;

		.shopName {
			font-size: 28rpx;
			color: #333333;
		}

		.status {
			font-size: 28rpx;
			color: #999999;
		}

		.goodsImg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			background: #EEEEEE;
			margin: 28rpx 22rpx 70rpx 0;
		}

		.goodsName {
			font-size: 28rpx;
			color: #333333;
			width: 480rpx;
		}

		.price {
			font-size: 28rpx;
			font-weight: 700;
			color: #f73f3f;
			margin: 8rpx 0 14rpx;
		}

		.sku {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 40rpx;
		}

		.bot {
			padding-top: 30rpx;
			border-top: 1rpx solid #EEEEEE;

			.msg {
				font-size: 28rpx;
				font-weight: 500;
				text-align: right;
				color: #333333;
				margin-bottom: 44rpx;

				text {
					margin-right: 50rpx;
				}
			}

			.btn {
				width: 152rpx;
				height: 70rpx;
				background: #ffffff;
				border: 1rpx solid #333333;
				border-radius: 37rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 68rpx;
				color: #333333;
			}

			.btnFill {
				width: 152rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #38be8c, #06adba 96%);
				border-radius: 36rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 70rpx;
				color: #ffffff;
				margin-left: 40rpx;
			}
		}
	}
</style>
